import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {ApplicationStackParamList} from "@/types/navigation";
import {Image} from "@gluestack-ui/themed"
import tabbarConfig, {tabbarStyle} from "@/theme/enums/tabbar";

const Tab = createBottomTabNavigator<ApplicationStackParamList>();

const Tabbar = () => {
    return (
        <Tab.Navigator
            screenOptions={({route}) => {
                const {icon, iconActive, title} = tabbarConfig.find(item => item.name == route.name)!;
                return {
                    tabBarIcon: ({focused}) => {
                        if (focused) return <Image width={24} height={24} alt={title} source={iconActive}/>;
                        return <Image width={24} height={24} alt={title} source={icon}/>
                    },
                    ...tabbarStyle,
                    title,
                    headerShown: false
                }
            }}
        >
            {React.Children.toArray(tabbarConfig.map(item => (
                <Tab.Screen
                    name={item.name}
                    component={item.cmp}
                />
            )))}
        </Tab.Navigator>
    );
};

export default Tabbar;